<template>
  <view class="ready-charge">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="充电准备"></van-nav-bar>
    <!-- #endif -->
    <view class="ready-charge-cnt" :style="styleHeight">
      <view class="header-wrap">
        <view class="bg"></view>
        <view class="info-wrap">
          <view class="flex-column info">
            <view class="text">设备名称：</view>
            <view class="text text-overflow">{{ data.items.connectorName }}</view>
          </view>
          <view v-if="appType !== 'lznt'" class="flex-column info">
            <view class="text">设备编号：</view>
            <view class="text">{{ data.items.connectorCode }}</view>
          </view>
          <view v-else class="flex-column info">
            <view class="text">快捷码：</view>
            <view class="text">{{ data.items.shortcutCode }}</view>
          </view>
        </view>
      </view>
      <view class="content-wrap">
        <view class="flex-column content">
          <view class="textt">设备功率</view>
          <view class="textb">{{ getVal(data.items.power, 'kW') }}</view>
        </view>
        <view class="flex-column content">
          <view class="textt">设备类</view>
          <view class="textb">{{ data.items.type === 1 ? '直流接口枪头' : '交流接口枪头' }}</view>
        </view>
      </view>
      <view class="content-wrap1 content-wrap2">
        <view class="title text-bold">停车说明</view>
        <view class="row row1">
          <view class="text">{{ data.items.parkExplain || '--' }}</view>
        </view>
      </view>
      <view class="content-wrap1 content-wrap2">
        <view class="title text-bold">终端计费</view>
        <view class="content-bg content-bg1">
          <view v-for="(item, index) in data.morePrices" :key="item.id">
            <view v-show="(index > 1 && data.isShow) || index < 2">
              <view v-if="index !== 0" class="row-line"></view>
              <view class="row row-info">
                <view class="text cblur">
                  <text class="iconfont icon-subtract cblur"></text>
                  {{ item.title }}
                  <text v-if="index === 0" class="row-tip row-tip2">当前</text>
                </view>
                <view class="text cblur">
                  <text v-if="item.deleteSumPrice" class="textr2">{{ item.deleteSumPrice }}</text>
                  {{ item.sumPrice || '--' }}
                </view>
              </view>
              <view class="row row-info">
                <view class="text">
                  <text class="iconfont icon-power"></text>
                  电费
                </view>
                <view class="text">
                  <text v-if="item.deletePricePower" class="textr2">
                    {{ item.deletePricePower }}
                  </text>
                  {{ item.pricePower || '--' }}
                </view>
              </view>
              <view class="row row-info">
                <view class="text">
                  <text class="iconfont icon-service"></text>
                  服务费
                </view>
                <view class="text">
                  <text v-if="item.deletePriceService" class="textr2">
                    {{ item.deletePriceService }}
                  </text>
                  {{ item.priceService || '--' }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="row row-bottom"></view>
      </view>
      <!-- 更多价格 -->
      <view v-if="data.morePrices.length > 2" class="more-price" @tap="tabMore">
        {{ data.isShow ? '隐藏更多' : '查看更多' }}
        <text class="iconfont icon-arrow-right" :class="{ 'arrow-show': data.isShow }"></text>
      </view>
      <view v-if="data.items.isOccupationCost" class="content-wrap1 content-wrap2">
        <view class="title">超时占用收费</view>
        <view class="content-bg">
          <view class="row-tip">
            完成充电之后请及时离场，超{{ data.items.parkBufferTime || '0' }}分钟将收取占用费！
          </view>
        </view>
        <view class="row row1">
          <view class="text">
            <text class="iconfont icon-power"></text>
            超时计费
          </view>
          <view class="text">
            {{ data.items.overtimeMoney || '--' }}元/{{ data.items.overtimeMin || '--' }}分钟
          </view>
        </view>
      </view>
      <view class="content-wrap1 content-wrap2">
        <view class="title-wrap">
          <view class="title text-bold">账户信息</view>
          <button class="bnt-wrap bnt-recharge" @tap="tabRecharge">充值</button>
        </view>
        <view class="row row-info row2">
          <view class="text">
            <text class="iconfont icon-uesr-wallet"></text>
            钱包余额
          </view>
          <view class="text">{{ data.money }}元</view>
        </view>
        <view class="row row-info row3">
          <view class="text">
            <text class="iconfont icon-invoice"></text>
            开票
          </view>
          <view class="text text-box">
            {{ data.items.supportInvoice === '1' ? '支持开票' : '不支持开票' }}
          </view>
        </view>
      </view>
      <view class="bottom-wrap text-bold" :style="styleBntH">
        <view class="text-wrap">
          单价：
          <text class="text">{{ data.sumPrice }}</text>
        </view>
        <button
          class="bnt-wrap bnt"
          @tap="tabCharge"
          :disabled="Boolean(data.items.workStatus === 3)">
          开始充电
        </button>
      </view>
    </view>
    <DialogOccupy ref="dialogOccupyRef" @start-charge="startCharge"></DialogOccupy>
  </view>
</template>

<script lang="ts" setup>
import DialogOccupy from './dialogOccupy.vue';
import { getSystemInfo, getUserId, setOrderObj, setToastInstance, systemInfo } from '@mixins/info';
import { queryConnectorSort, getAccount, queryStartCharge } from '@/service/apis/station';
import { getUserCurrentOrder } from '@/service/apis/order';
import { getPrice } from '@/pages/stationDetails/price';
import { getVal, noMultipleClicks } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const appType = import.meta.env.VITE_VUE_APP_TYPE;

const $toast: any = inject('$Toast');

let styleHeight = ref(`height: calc(100vh - 12px - 124rpx - ${getSystemInfo().safeBottom}px)`);
const styleBntH = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;

// #ifdef H5
styleHeight.value = `height: calc(100vh - 12px - 124rpx - ${getSystemInfo().safeBottom}px - ${
  getSystemInfo().navHeight
}px)`;
// #endif
const dialogOccupyRef = ref();

const data = reactive({
  id: '',
  items: {} as any,
  morePrices: [] as any,
  money: '0.00',
  sumPrice: '',
  isShow: false,
});

onLoad((option: any) => {
  data.id = option.id;

  tabCharge = noMultipleClicks(tabCharge);
});

onShow(() => {
  queryConnectorSort({
    id: data.id,
  }).then((res: any) => {
    data.items = res;
    data.morePrices = [];
    res?.appCostTemplateResultDTOList?.forEach((item: any, index: number) => {
      const obj = getPrice(item);
      if (index === 0) {
        data.sumPrice = obj.sumPrice;
      }
      data.morePrices.push(obj);
    });
  });
  getAccount({ accountType: '0', originalAccountId: getUserId() }).then((res: any) => {
    const money = Number(res.personalBalance) + Number(res.unitBalance);
    data.money = money.toFixed(2);
  });
});

const tabMore = () => {
  data.isShow = !data.isShow;
};

// 充值
const tabRecharge = () => {
  uni.navigateTo({
    url: `/pagesMyCenter/recharge/recharge`,
  });
};

// 开始充电
let tabCharge = () => {
  if (appType === 'lznt') {
    if (Number(data.money) >= 30) {
      startCharge();
    } else {
      uni.showModal({
        content: '尊敬的客户，您账户余额已不足30元，请及时充值，以免因余额不足而充电跳枪。',
        showCancel: true,
        cancelText: '继续充电',
        confirmText: '去充值',
        success: (e: any) => {
          if (e.confirm) {
            tabRecharge();
          } else if (e.cancel) {
            startCharge();
          }
        },
      });
    }
  } else {
    if (data.items.isOccupationCost) {
      dialogOccupyRef.value.open(data.items);
    } else {
      startCharge();
    }
  }
};
const startCharge = () => {
  queryStartCharge({
    userId: getUserId(),
    terminalId: data.id,
    chargeSource: '1',
    // #ifdef MP-WEIXIN
    chargeType: '1',
    // #endif
    // #ifdef MP-ALIPAY
    // @ts-ignore
    chargeType: '2',
    // #endif
    // #ifdef H5
    // @ts-ignore
    chargeType: '6',
    // #endif
  })
    .then((res: any) => {
      console.log('dddd---', res);
      uni.redirectTo({
        url: `/pages/charge/charging?id=${res.data}`,
      });
    })
    .catch((res: any) => {
      console.log('fff---', res);
      // 余额不足
      if (res.businessCode === '20102') {
        uni.showModal({
          content: res.msg,
          showCancel: false,
          success: () => {
            tabRecharge();
          },
        });
      }
      //充电中订单
      else if (res.businessCode === '40401') {
        uni.showModal({
          content: res.msg,
          showCancel: true,
          success: (e: any) => {
            if (e.confirm) {
              // uni.switchTab({
              //   url: '/pages/order/order',
              // });
              const userId = getUserId();
              getUserCurrentOrder(userId).then((res1: any) => {
                if (res1) {
                  uni.redirectTo({
                    url: `/pages/charge/charging?id=${res1}`,
                  });
                } else {
                  $toast('充电订单已结束！');
                }
              });
            }
          },
        });
      }
      // 待支付订单
      else if (res.businessCode === '40403') {
        uni.showModal({
          content: res.msg,
          showCancel: false,
          success: () => {
            setOrderObj({ pageType: 'unpay' });
            uni.reLaunch({
              url: '/pages/order/order',
            });
          },
        });
      } else {
        $toast(res.msg);
      }
    });
};
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.ready-charge {
  position: relative;
  height: calc(100vh - 12px);
  padding-top: 12px;
  background-color: #f6f8ff;
  overflow: auto;
  // #ifdef H5
  height: 100vh;
  padding-top: 0px;
  // #endif
  &-cnt {
    box-sizing: border-box;
    position: relative;
    padding-top: 12px;
    overflow: auto;
  }

  .header-wrap {
    position: relative;
    height: 205px;
    margin: 0 16px 12px 16px;
    background-image: linear-gradient(#365ded, #2e52db);
    border-radius: 12px;

    .bg {
      width: 100%;
      height: 100%;
      background-image: url($url + 'charge/ready.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .info-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 66px;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      background-color: $uni-color-primary;

      .info {
        display: flex;
        justify-content: center;
        flex: 1;
        width: 50%;
        color: #fff;
        font-size: 12px;

        &:first-child {
          border-right: 1px solid #f2f2f2;
        }

        .text {
          line-height: 18px;
          margin: 0 12px;
        }
      }
    }
  }

  .content-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 16px 12px 16px;
    padding: 10px 0;
    background-color: #fff;
    border-radius: 12px;

    .content {
      flex: 1;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #f2f2f2;
      box-sizing: border-box;

      .textt {
        line-height: 22px;
        font-size: 14px;
        color: #858585;
      }

      .textb {
        margin-top: 4px;
        line-height: 24px;
        font-size: 16px;
        color: #242424;
      }
    }
  }

  .content-wrap1 {
    display: flex;
    flex-direction: column;
    margin: 0 16px 12px 16px;

    &.content-wrap2 {
      margin-top: 12px;
    }

    .content-bg {
      background-color: #fff;
    }

    .content-bg1 {
      padding: 12px 0 6px 0;
    }

    .title-wrap {
      display: flex;
      justify-content: space-between;

      .bnt-recharge {
        height: 24px;
        margin: 0;
        border-radius: 100px;
        font-size: 13px;
      }
    }

    .title {
      padding-bottom: 12px;
      line-height: 24px;
      font-size: 16px;
      color: #000;
    }

    .row {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      background-color: #fff;
      border-radius: 8px;

      &.row1 {
        padding: 12px 6px;
      }

      &.row-info {
        padding: 4px;
      }

      &.row-top {
        padding-top: 20px;
      }

      &.row-bottom {
        padding: 2px;
      }

      &.row2 {
        padding-top: 12px;
        padding-bottom: 4px;
      }

      &.row3 {
        padding-top: 4px;
        padding-bottom: 12px;
      }

      .row-tip {
        display: inline-flex;
        align-self: center;
        line-height: 22px;
        padding: 0 6px;
        margin: 0 5px;
        color: #fff;
        background-color: #fc8888;
        font-size: 14px;
        border-radius: 4px;
      }

      .row-tip2 {
        border-radius: 50px;
        font-size: 12px;
      }
    }

    .row-tip {
      display: inline-flex;
      align-self: center;
      line-height: 22px;
      padding: 0 6px;
      margin: 0 5px;
      color: #fff;
      background-color: #fc8888;
      font-size: 14px;
      border-radius: 4px;
    }

    .text {
      line-height: 22px;
      font-size: 14px;
      color: #545454;
    }

    .textr2 {
      color: #b5b5b5;
      text-decoration: line-through;
    }

    .cblur {
      color: $uni-color-primary;
    }

    .text-box {
      display: inline-flex;
      justify-content: center;
      height: 22px;
      padding: 0 6px;
      background-color: $uni-color-primary;
      color: #fff;
      border-radius: 50px;
    }
  }

  .more-price {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    line-height: 22px;
    font-size: 14px;
    color: $uni-color-primary;

    .icon-arrow-right {
      margin-left: 8px;
      font-size: 8px;
      color: $uni-color-primary;
      transform: rotate(90deg);
    }

    .arrow-show {
      transform: rotate(270deg);
    }
  }

  .row-line {
    width: calc(100% - 18px);
    height: 1px;
    margin: 5px 9px;
    background-color: #e5e8f6;
  }

  .bottom-wrap {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 9px 16px;
    background-color: #fff;
    font-size: 14px;
    color: #242424;
    border-top: 1px solid #e6e6e6;

    .text-wrap {
      display: flex;
      align-items: center;
      height: 44px;
    }

    .text {
      font-size: 20px;
      color: #fa3939;
    }

    .bnt {
      width: 136px;
      height: 44px;
      margin: 0;
      border-radius: 50px;
      font-size: 16px;
    }
  }
}
</style>